<template>
	<!-- 为你推荐 -->
	<view class='rectangle  bor-r18 bshow6'  :class="CheckStatus=='0'?'':'margin_top10'">
		<view class="title-bar">
			<view class="title-text">{{titleName}}</view>
			<view @click='tomore'>
				<view class="more">更多 </view>
				<view class="vector_img">
					<image src="../../../static/images/vector.png" mode=""></image>
				</view>
			</view>

		</view>

		<view class="right">
			<view class="item-box u-flex">
				<view style="width:32%" class="u-flex-col u-col-center goods-item"
					@tap="jump('/pages/goods/detail', { id: goods.id })" v-for="(goods, index1) in goodsList"
					:key="goods.id">
					<image class="item-img" lazy-load :src="baseUrl+goods.image" mode="aspectFill"></image>
					<text class="item-title u-ellipsis-1 ">{{ goods.title }}</text>
					<view class="item-price">{{ goods.price }}</view>
				</view>
			</view>

			<!-- 缺省页 -->
			<shopro-empty v-if="isEmpty" marginTop="0" :image="$IMG_URL + '/imgs/empty/empty_goods.png'"
				tipText="暂无推荐，还有更多好货等着你噢~">11111111111111</shopro-empty>
			<!-- </view>


			<!-- <view class="item" style="background-color: aqua;">1</view>
			<view class="item" style="background-color: aqua;">2</view>
			<view class="item" style="background-color: aqua;">3</view>
 -->
		</view>




	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {
			titleName: {
				type: String,
				default: ''
			},
			CheckStatus:{
				type:String,
				default:'1'
			}
		},
		data() {
			return {
				goodsList: [], //商品列表
				baseUrl: this.$baseUrl, //后台域名地址
				isEmpty: true
			}
		},
		onLoad() {},

		methods: {
			tomore() {
				uni.switchTab({
					url: "pages/index/shop",
				})
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			async splitData() {
				if (!this.tempList.length) return;
				let item = this.tempList[0];
				if (!item) return;

				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
					this.leftList.push(item);
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += item.activity_discounts_tags.length ? 350 : 330;
					this.rightList.push(item);
				} else {
					this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
					this.leftList.push(item);
				}

				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			// 商品列表
			getGoodsList() {
				let that = this;
				that.$https('doctindex.recgoodsList', {}).then(res => {
					if (res.code === 1) {
						that.goodsList = res.data;
						that.isEmpty = (null === that.goodsList || !that.goodsList.length) ? true : false;
					}
				});
			}

		},

	}
</script>


<style scoped lang="scss">
	image {

		width: 100%;
		height: 100%;

	}

	.rectangle {
		/* Rectangle 4062 */

		position: relative;
		width: 700rpx;
		height: 470rpx;
		margin-left: 28rpx;
		margin-right: 28rpx;
		margin-bottom: 28rpx;
		// margin-top: 12rpx; 
		background: #ffffff;
		border-radius: 8rpx;
		text-align: center;
	}

	.title-bar {
		display: flex;
		height: 25px;
	}

	.title-text {
		/* 活动专区 */

		position: relative;
		width: 304rpx;
		height: 48rpx;
		margin-left: 28rpx;
		margin-top: 20rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 16px;
		line-height: 34rpx;
		display: flex;
		align-items: center;
		color: #111111;


	}

	.more {
		/* 更多 */
		// position: absolute;
		position: relative;
		width: 50rpx;
		// height: 52rpx;
		left: 262rpx;
		margin-top: 20rpx;
		top: 2rpx;

		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 17px;
		display: flex;
		align-items: center;

		color: #777777;
		margin-right: 10rpx;
		// text-align: right;

	}

	.vector_img {
		position: relative;
		/* Vector */
		height: 20rpx;
		width: 20rpx;
		left: 315rpx;
		align-items: center;
		display: flex;
		top: -25rpx;


	}



	.right {
		padding: 0 30upx;
		flex: 1;
		width: 100%;
		height: 350rpx;
		margin-top: 30rpx;

		.type-img {
			width: 505rpx;
			height: 150rpx;
			background: #ccc;
			// margin: 20rpx 0;
			border-radius: 10rpx;
		}

		// .item-list {
		.type-box {
			height: 84rpx;

			.type-title {
				font-size: 28rpx;
				font-weight: bold;
			}

			.more {
				font-size: 26rpx;
				color: #999;
			}
		}

		.item-box {
			flex-wrap: wrap;

			// width: 100%;
			.goods-item {
				margin-right: 12rpx;
				margin-bottom: 12rpx;
				background: #ffffff;
				// box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
				border: 0.5rpx solid #E5E5E5;
				border-radius: 10rpx;

				&:nth-child(3) {
					margin-right: 0;
				}

				.item-img {
					width: 180rpx;
					height: 206rpx;
					border-radius: 10rpx 10rpx 0px 0px;
					background: #f5f5f5;
					margin-top: 25rpx;
				}

				.item-title {
					font-size: 24rpx;
					line-height: 24rpx;
					// margin-top: 10rpx;
					width: 100%;
					text-align: left;
					margin-left: 20rpx;
					margin-top: 25rpx;
					// margin: 20rpx;
				}

				.item-price {
					font-size: 28rpx;
					font-weight: 500;
					color: #ff3000;
					text-align: left;
					width: 100%;
					margin-left: 20rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;

					&::before {
						content: '￥';
						font-size: 22rpx;
					}
				}

				// }
			}
		}
	}

	.bor-r18 {
		border-radius: 18rpx;
	}

	.bshow6 {
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
	}
	.margin_top10{
		margin-top: 46rpx;
	}
</style>
